<template>
	<view>
		<u-navbar title=" " placeholder :bgColor="bgColor" :border="false" autoBack>
			<view class="search-wrap" slot="center">
				<u-search placeholder="搜索笔记" bgColor="#ffffff" :showAction="false" inputAlign="center" searchIcon=" "
					v-model="keyword"></u-search>
			</view>
		</u-navbar>
		<view class="list">
			<view class="knowledge-li shadow" v-for="i in 10" :key="i">
				<view class="top">
					<text class="font-32 font-bold">知识库名称{{i+1}}</text>
					<text class="font-24" v-if="i>3">添加</text>
					<view class="font-24 added" v-else>
						<u-icon name="checkmark-circle-fill" color="#7BCB8C"></u-icon>
						<text>已添加</text>
					</view>
				</view>
				<view class="bottom">
					<text class="font-24">笔记数量： 100</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "transparent",
				dataList: [1, 2, 3, 4, 5]

			};
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.search-wrap {
		width: 200px;
		height: 33px;
		border-radius: 20px;
		opacity: 1;
		background: #FCFCFC;
	}

	.list {
		margin: 30rpx 30rpx 0 30rpx;
	}

	.knowledge-li {

		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 10px;
		color: #3d3d3d;
		background-color: #ffffff;

		.top {
			border-radius: 10px;
			background: #F8F5F4;
			width: 100%;
			height: 74px;
			padding: 27rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.added {
				color: #7BCB8C;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.bottom {
			border-radius: 0 0 10px 10px;
			background: #ffffff;
			width: 100%;
			height: 62px;
			padding: 20rpx;
			text-align: right;
			font-size: 24rpx;
			box-sizing: border-box;
		}
	}
</style>